<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">课前准备</block>
    </cu-custom>
    <view style="width: 100%;text-align: center;">
      <view style="margin: 80upx 0;font-size: 50upx;">
        {{title}}
      </view>
      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          客户状态
        </view>
        <view class="u-f-ajc">
          <view v-for="(item, index) in emojiList" :key="index" @click="selectEmoji(index)" class="emoji-item">
            <image :src="item" />
          </view>
        </view>
      </view>


      <view style="display: flex;width: 100%;padding: 0 4%;justify-content: space-between;height: 100upx;line-height: 100upx;border-bottom: 1upx solid #F0F0F0;background-color: #fff;">
        <view class="">
          客户身体数据
        </view>
      </view>
      <view class="body_list u-f-ajc">
        <view class="body_item u-f-ajc">
          客户体重<input type="number" placeholder="请选择" v-model="weight" />kg
        </view>
        <view class="body_item u-f-ajc">
          睡眠时长<input type="number" placeholder="请选择" v-model="sackTime" />h
        </view>
        <view class="body_item u-f-ajc">
          胃口指数
          <picker class="pickers" @change="bindPickerChange($event, 1)" :value="array[index1].id" :range="array" range-key="name">
            <view class="u-f-ajc" style="width: 100%; height: 40rpx;">{{array[index1].name}}</view>
          </picker>
          <text class="cuIcon-right"></text>
        </view>
        <view class="body_item u-f-ajc">
          活力指数
          <picker class="pickers" @change="bindPickerChange($event, 2)" :value="array[index2].id" :range="array" range-key="name">
            <view class="u-f-ajc" style="width: 100%; height: 40rpx;">{{array[index2].name}}</view>
          </picker>
          <text class="cuIcon-right"></text>
        </view>
      </view>



    </view>
    <view @click="jump" data-src='/pagesA/Preparation_plan/Course_Details' style="position: fixed;bottom: 0;z-index: 99; width: 100%;height: 80upx;line-height: 80upx;text-align: center;background-color: #39BB9E;color: #fff;font-size: 32upx;">
      开始上课
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        weight: '',
        sackTime: '',
        title: '',
        emojiList: [
          '../../static/bkhumor-emoji/15.gif',
          '../../static/bkhumor-emoji/21.gif',
          '../../static/bkhumor-emoji/80.gif',
          '../../static/bkhumor-emoji/76.gif',
          '../../static/bkhumor-emoji/20.gif',
        ],
        selectChage: '',
        index1: '',
        index2: '',
        array: [{
          name: '非常好',
          id: 0,
        },{
          name: '好',
          id: 1,
        },{
          name: '一般',
          id: 2,
        },{
          name: '不好',
          id: 3,
        }],
      }
    },
    onLoad(e) {
      uni.setStorageSync("beforeClass", "");
      uni.setStorageSync("list1", {});
      console.log(e)
      this.title = e.name;
      this.id = e.planCourseId;
    },
    onReady() {

    },
    methods: {
      selectEmoji(index) {
        if (this.emojiList.length != 1 && !this.selectChage) {
          console.log('没有值')
          this.emojiList = [this.emojiList[index]]
          this.selectChage = index.toString()
        } else if (this.emojiList.length == 1 && this.selectChage) {
          console.log('有值')
          this.emojiList = [
            '../../static/bkhumor-emoji/1.gif',
            '../../static/bkhumor-emoji/2.gif',
            '../../static/bkhumor-emoji/3.gif',
            '../../static/bkhumor-emoji/4.gif',
            '../../static/bkhumor-emoji/5.gif',
          ]
          this.selectChage = ''
        }
      },
      bindPickerChange: function(e, index) {
        this['index'+index] = e.detail.value
      },
      jump(e) {
        let url = e.currentTarget.dataset.src
        if (url.indexOf('Course_Details')!=-1) {
          if (!this.selectChage) {
            wx.showToast({
              title: '请选择客户状态~',
              icon: 'loading'
            })
            return
          }
          let beforeClass = {
            planCourseId: this.id,
            planId: uni.getStorageSync("planId"),
            selectChage: this.selectChage,
            weight: this.weight,
            sackTime: this.sackTime,
            title: this.title,
            index1: this.index1,
            index2: this.index2,
          }
          uni.setStorageSync("beforeClass", beforeClass)
        }
        console.log(e.currentTarget.dataset.src)
        if (url == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url
          });
        }
      },

    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff !important;
  }

  .emoji-item {
    width: 60rpx;
    height: 60rpx;
    margin: 0 10rpx;

    >image {
      width: 100%;
      height: 100%;
    }
  }

  .body_list {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40rpx 2%;
    background-color: #F7F5F8;
    flex-wrap: wrap;

    .body_item {
      padding: 20rpx 0;
      width: 50%;
      font-size: 24rpx;
    }

    .body_item::before {
      content: '';
      display: inline-block;
      width: 10rpx;
      height: 30rpx;
      background-color: $uni-color-zhuti;
      margin-right: 20rpx;
    }

    input {
      width: 45%;
    }
  }

  .pickers {
    width: 45%;
  }
</style>
